<template>
  <div class="navv-item" v-on:click="nItemClick">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'NavVItem',
  props: {
    path: String,
  },
  methods: {
    nItemClick() {
      this.$router.push(this.path);
    },
  },
};
</script>
<style scoped>
  .navv-item img {
    height: 45px;
  }
  .navv-item:nth-child(1) {
    display: flex;
    align-items: center;
    flex: 2;
    margin-left: 10px;
  }
  .navv-item:nth-child(2) {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .navv-item:nth-child(2) img {
    width: 37px;
    height: 45px;
  }
  .navv-item:nth-child(3) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
  }
  .navv-item:nth-child(3) img {
    width: 37px;
    height: 45px;
  }
</style>
